<template>
	<a-card class="detail-container">
		<template #title>
			<a-button :icon="h(ArrowLeftOutlined)" @click="goBack">返回</a-button>
			<span class="title-txt">报修详情</span>
		</template>
		<RepairItem :detail="true" :rpitem="data"/>
		<div class="li-cheng">
			<div class="li-cheng-title">工单日志</div>
			<div class="li-cheng-line">
				<a-timeline>
					<template v-for="(item, indx) in status" :key="`line${indx}`">
						<a-timeline-item :color="`${indx==0?'blue':'gray'}`">
							<p :class="`title ${indx==0?'now':''}`">{{item.rep_wos_operatename}}</p>
							<p class="info">{{ item.rep_wos_operateremark }}</p>
							<p class="time">{{item.rep_wos_operatetime1}}</p>
						</a-timeline-item>
					</template> 
				</a-timeline>
			</div>
		</div>
	</a-card>
</template>
<script setup>
	import { ref, onMounted, h } from 'vue';
	import tool from '@/utils/tool';
	import { ArrowLeftOutlined } from '@ant-design/icons-vue';
	import RepairItem from '@/views/open-info/components/repair-item.vue';
	import { RepairApi } from '@/api/repair-api'; 

	const data = ref({});
	const status = ref([]);

	const emit = defineEmits(['goBack']);
	const props = defineProps({
		rep_wo_id: {
			type: String,
			default: '',
		},
		/**
		 * 是否隐藏敏感字段
		 */
		hide:{
			type: Boolean,
			default: false,
		}
	});
	const goBack = function () {
		emit('goBack');
	};
	 
	onMounted(() => {
		showDetail();
	}); 
	const showDetail = async function(){
		 if(!props.rep_wo_id){
			return;
		 } 
		tool.showLoading();
		const res = await RepairApi.getRepariDetail({
			...props
		});
		tool.hideLoading();
		if(res.code!='0'){
			tool.error(res.codemessage);
			return;
		} 
		status.value = res.repair_workorder_status;
		if(res.repair_workorder && res.repair_workorder.length>0){
			data.value = res.repair_workorder[0];
		}else{
			data.value ={};
		}
	};
</script>
<style lang="less" scoped>
	.detail-container {
		margin-bottom: 40px;

		.title-txt {
			margin-left: 16px;
		}

		.li-cheng {
			.li-cheng-title {
				font-size: 14px;
				color: #1d2129;
				font-weight: 600;
			}
			.li-cheng-line {
				padding: 16px 0;
				.title {
					font-size: 14px;
					color: #1d2129;
					margin-bottom: 8px;
					font-weight: 600;
					&.now {
						color: #165dff;
					}
				}
				.info {
					font-size: 14px;
					color: #4e5969;
					margin-bottom: 2px;
				}
				.time {
					font-size: 12px;
					color: #c9cdd4;
					margin-bottom: 2px;
				}
			}
		}
	}
</style>
